import {useEffect, useState} from 'react';
import {apiGetDeptBalanceInfo} from "@src/page/accountPage/api";
import {Message, Statistic} from "@arco-design/web-react";
import {Dept} from "@src/page/system/dept/types";
import AccountRechargeDialog from './accountRechargeDialog';

export default function AccountInfo() {
  const [sysDept, setDeptInfo] = useState<Dept>();

  const [accountRechargeDialogShow, setAccountRechargeDialogShow] = useState(false);

  useEffect(() => {
    loadDeptBalanceInfo();
  }, []);

  async function loadDeptBalanceInfo() {
    try {
      let res = await apiGetDeptBalanceInfo();
      let data = res.data;
      if (data.code === 200) {
        setDeptInfo(data.data);
      } else {
        Message.warning(data.msg ?? '获取商户余额失败');
      }
    } catch (e: any) {
      Message.error(e.message ?? '获取商户余额失败');
    }
  }

  return (
    <div>
      <div className="pl-50">
        <div className="mt-10 d-flex-r ai-end">
          <div className="d-flex-r ai-center">
            <div className="font-widget-500 font-14">账户余额：</div>
            <Statistic value={(sysDept?.usableMoney ?? 0)/100} groupSeparator precision={2}/>
          </div>
          <div className="text-primary-color ml-120 cursor-pointer ml-50"
               onClick={() => setAccountRechargeDialogShow(true)}>
            充值
          </div>
        </div>
        <div className="d-flex-r ai-center mt-20">
          <div className="font-widget-500 font-14">冻结金额：</div>
          <Statistic value={(sysDept?.frozenMoney ?? 0)/100} groupSeparator precision={2}/>
        </div>
        <div className="mt-20 font-14 text-9-color">说明：为保证系统内服务正常使用请保持账户余额充足。</div>
      </div>
      {accountRechargeDialogShow && (
        <AccountRechargeDialog show={accountRechargeDialogShow} onClose={() => setAccountRechargeDialogShow(false)}/>
      )}
    </div>
  );
}
